<template>
	<view class="register-container">
		<view class="title">注册</view>
		<view class="form-item">
			<input type="text" placeholder="请输入用户名" v-model="username" />
		</view>
		<view class="form-item">
			<input type="password" placeholder="请输入密码" v-model="password" />
		</view>
		<view class="form-item">
			<input type="password" placeholder="请确认密码" v-model="confirmPassword" />
		</view>
		<view class="form-item">
			<input type="number" placeholder="请输入电话号码" v-model="mobile" />
		</view>
		<view class="form-item">
			<input type="text" placeholder="请输入Email" v-model="email" />
		</view>
		<button class="register-btn" @click="register">注册</button>
		<view class="login-link">
			<text>已有账号?</text>
			<navigator url="/pages/tabBar/login/login" hover-class="nav-hover">去登录</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				confirmPassword: '',
				mobile:'',
				email:''
			};
		},
		methods: {
			register() {
				if (this.username && this.password && this.confirmPassword) {
					if (this.password == this.confirmPassword) {
						uni.showToast({
							title: '注册成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/tabBar/login/login'
							});
						}, 2000);
					} else {
						uni.showToast({
							title: '两次密码不一样',
							icon: 'none'
						})
						return
					}
					uniCloud.callFunction({
						name:'AddUser',
						data:{
							'name':this.username,
							'password':this.password,
							'mobile':this.mobile,
							'email':this.email
						},
						success:(e) => {
							console.log("AddUser callback" + JSON.stringify(e));
							uni.showToast({
								title:'注册成功',
								duration:2000
							});
						},
						fail: (errer) => {
							console.errer("adduser fail" + errer);
						}
					})
				} else {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style scoped>
	.register-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0,0,0.1);
		margin: 15px;
	}

	.title {
		font-size: 24px;
		margin-bottom: 30px;
	}

	.form-item {
		margin-bottom: 20px;
		width: 100%;
		padding-right: 10px;
	}

	input {
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 20px;
	}

	.register-btn {
		width: 100%;
		background-color: #007AFF;
		color: #fff;
		border-radius: 4px;
		padding: 10px;
		margin-bottom: 20px;
	}

	.login-link {
		display: flex;
		align-items: center;
	}

	.login-link text {
		margin-right: 5px;
	}

	.nav-hover {
		color: #007AFF;
	}
</style>